<template>
  <view class="calendar-container">
	<view class="calendar-bg-month" v-show="isExpand">
		{{currentDate.month < 10?`0${currentDate.month}`: currentDate.month}}
	</view>  
    <view class="calendar-date">
      {{currentDate.year}}年{{currentDate.month}}月
    </view>
    <view class="weekend-row">
      <view class="weekend-col"
           v-for="(item, index) in weekendList"
           :key="index">
        {{item}}
      </view>
    </view>

    <!--未展开-->
    <swiper class="my-swipe my-not-expand-swipe"
           ref="notExpandRef"
           v-show="!isExpand"
		   :duration="100"
		   :current="currentWeekIndex"
           :loop="false"
           :show-indicators="false"
           @change="changeWeek"
    >
      <template v-for="(parent, index) in lineWeekDataList">
		<!-- #ifdef H5 || APP-PLUS -->
        <swiper-item
			:key="`not-expand-${index}`"
		>
          <ExpandCalendar :dateData="parent"
                          :click-day="activeDay"
                          :activeMonth="calMonthColor+1"
                          ref="notExpandCalendarRef"
                          @changeDate="changeDateMethods"></ExpandCalendar>

        </swiper-item>
		<!-- #endif -->
		
		<!-- #ifndef H5 || APP-PLUS -->
		<swiper-item
			:key="[`not-expand-${index}`]"
		>
		  <ExpandCalendar :dateData="parent"
		                  :click-day="activeDay"
		                  :activeMonth="calMonthColor+1"
		                  ref="notExpandCalendarRef"
		                  @changeDate="changeDateMethods"></ExpandCalendar>
		
		</swiper-item>
		<!-- #endif -->
      </template>
    </swiper>

    <!--展开-->
    <swiper class="my-swipe my-expand-swipe"
           ref="expandRef"
           :loop="false"
		   :duration="100"
		   :current="currentMonth"
           v-show="isExpand"
           :show-indicators="false"
           @change="changeMonth"
    >
      <template v-for="(parent, index) in allDateList">
		<!-- #ifdef H5 || APP-PLUS -->
        <swiper-item
			:key="`expand-${index}`"
		>
          <ExpandCalendar :dateData="parent.data"
                          :click-day="activeDay"
                          :activeMonth="calMonthColor+1"
                          ref="expandCalendarRef"
                          @changeDate="changeDateMethods"></ExpandCalendar>

        </swiper-item>
		<!-- #endif -->
		
		<!-- #ifndef H5 || APP-PLUS -->
		<swiper-item
			:key="[`expand-${index}`]"
		>
		  <ExpandCalendar :dateData="parent.data"
		                  :click-day="activeDay"
		                  :activeMonth="calMonthColor+1"
		                  ref="expandCalendarRef"
		                  @changeDate="changeDateMethods"></ExpandCalendar>
		
		</swiper-item>
		<!-- #endif -->
      </template>

    </swiper>
	</view>
</template>


<script>
	import CalendarObj from './date.js'
	import ExpandCalendar from './calendar.vue'
	export default {
		components:{
			ExpandCalendar
		},
		data() {
			return {
				activeObj: {},
				calMonthColor: 0,  // 用于计算月份 显示颜色
				cacheWeekIndex: 0,
				cacheMonthIndex: 0,
				currentWeekIndex: 0,
				lineWeekDataList: [],
				currentMonth: 0,
				currentDate: "",
				activeDay: "",
				currentDateList: [],
				allDateList: [],
				lineCurrentDateList: [],
				weekendList: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
				circlePai: 18
			}
		},
		props: {
			isExpand: {
				type: Boolean,
				default: false
			},
			format: {
				type: String,
				default: 'YYYY-MM-DD'
			},
			yearsList: {
				type: Array,
				default:() => [2021]
			}
		},
		watch: {
			isExpand() {
				this.updateExpandStatus()
			}
		},
		created() {
			const opt = {
			prev: "上个月",
			  current: "当前",
			  next: "下个月"
			};
			const yearsList = this.$props.yearsList
			let count = 0;
			const cacheDateLen = 12; // 前后缓存十个
			let weekIndex = 0;
			let monthIndex = 0;
			const calendar = CalendarObj({
			  // 获取的每个日历数据的最小单元
			  // 这里可以自定义想要的数据

			  // callback 参数为最终的日历josn 数据
			  callback: calendarJson => {
				// console.log("json", calendarJson);
				this.currentDateList = calendarJson;
				const circleLength = Math.floor(2 * Math.PI * this.circlePai);
				this.currentDateList.forEach((item, key) => {
				  count++;
				  // 初始化percent
				  item.weekIndex = weekIndex;
				  if(this.currentDateList[key+1] && this.currentDateList[key].dateStr !== this.currentDateList[key+1].dateStr) {
				  	if(item.week === 6) {
						weekIndex++;
				  	}
				  }
				  item.percent = 0;

				  if (item.isToday) {
					const calYearIndex = item.year - yearsList[0]
					this.currentWeekIndex = parseInt(item.weekIndex, 10)
					this.cacheWeekIndex = item.weekIndex
					this.activeDay = item.dateStr
					this.currentMonth = (parseInt(item.month, 10) - 1) + 12 * calYearIndex;
					this.calMonthColor = parseInt(item.month, 10) - 1;
					this.cacheMonthIndex = parseInt(item.month, 10) - 1;
					this.currentDate = JSON.parse(JSON.stringify(item));
					this.activeObj = Object.assign({}, item)
					item.percent = (circleLength * 100) / 100;
					// this.calculateLineDate(calendarJson);
				  }
				});

				this.allDateList.push({
				  data: calendarJson
				});
			  }
			  // 设置 dateStr 输出格式
			}).format(this.format);
			
			for(let j = 0;j < yearsList.length;j++) {
				for (let i = 0; i < cacheDateLen; i++) {
				      let month = i;
				      let year = yearsList[j];
				      calendar.toDate({ year, month }).paint();
				}
			}
			
			
			// 计算周 先聚合，在计算
			const weekObj = {}
			const weekPlatList = []
			// console.log(this.allDateList)
			this.allDateList.forEach((parent, parentIndex) => {
			  parent.data.forEach((item, key) => {
				weekObj[`week-${item.weekIndex}`] = []
			  })
			  parent.data.forEach((item, key) => {
				weekObj[`week-${item.weekIndex}`].push(item)
			  })
			})
			
			Object.keys(weekObj).forEach((parent) => {
			  // 判断是否有第一个重复
			  weekPlatList.push(weekObj[parent])
			})
			this.lineWeekDataList = weekPlatList
		},
		methods: {
			changeWeek(ev) {
				let index = ev.detail.current
				// 找到当前选中的位置
				const selectedWeekIndex = this.activeObj.week
				
				this.activeDay = this.lineWeekDataList[index][selectedWeekIndex].dateStr
				this.activeObj = this.lineWeekDataList[index][selectedWeekIndex]
				this.cacheWeekIndex = index
				const {month} = this.activeObj
				
				this.calMonthColor = month - 1
				this.currentDate.month = month
				this.$emit("changeDate", this.activeObj)
			},
			changeMonth(ev) {
				let index = ev.detail.current
				// 切换 默认选中第一天
				this.cacheMonthIndex = index;
				this.currentMonth = index;
				// 默认选中一号
				const monthTmpList = this.allDateList[index].data
				
				for(let i = 0;i < monthTmpList.length;i++) {
				  if(monthTmpList[i].day === 1) {
					this.calMonthColor = monthTmpList[i].month - 1
					this.currentDate.month = monthTmpList[i].month
					this.currentDate.year = monthTmpList[i].year
				    // 选中的同一月 不默认选中
				    if(this.activeObj.month === monthTmpList[i].month) {
						break
				    } else {
						this.activeObj = monthTmpList[i]
						this.activeDay = monthTmpList[i].dateStr
						this.$emit("changeDate", monthTmpList[i]);
						break
				    }
				  }
				}
			},
			updateExpandStatus() {
				setTimeout(() => {
					// tru 展开  false 收缩
					if(this.isExpand) {
						let yearsList = this.$props.yearsList
						const calYearIndex = this.activeObj.year - yearsList[0]
						const monthIndex = (parseInt(this.activeObj.month, 10) - 1) + 12 * calYearIndex
						// 展开月日历
						this.currentMonth = (parseInt(this.activeObj.month, 10) - 1) + 12 * calYearIndex
					} else {
						const weekIndex = this.activeObj.weekIndex
						this.currentWeekIndex = this.activeObj.weekIndex
					}
				})
			},
			
			changeDateMethods(row) {
			  this.activeDay = row.data.dateStr;
			  this.activeObj = Object.assign({}, row.data)
			  this.$emit("changeDate", row);
			},
		}
	}
</script>

<style scoped lang="scss">
	@import './calendar.scss'
</style>
